<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <base href="/oa/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/js/bootstrapValidator.js"></script>
    <style>
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
        .baojia-container {
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            margin-top: 10px;
        }
        .baojia-item {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<div class="panel panel-primary">
    <form action="${pageContext.request.contextPath}/zc-assetpurchaseapply/addBaojia" id="myform" method="post" class="form-horizontal" role="form">
        <table class="table table-bordered table-hover">
            <input type="hidden" name="oid" value="${oid}">
            <tbody>
            <c:forEach items="${details}" var="detail" varStatus="status">
                <tr class="thead-blue">
                    <td colspan="4">购买明细(${status.index + 1})</td>
                </tr>
                <tr>
                    <td class="col-md-2"><label>资产名称</label></td>
                    <td class="col-md-4">${detail.assetName}</td>
                    <td class="col-md-2"><label>序列号</label></td>
                    <td class="col-md-4">${detail.assetNumber}</td>
                </tr>
                <tr>
                    <td><label>规格</label></td>
                    <td>${detail.guige}</td>
                    <td><label>购买数量</label></td>
                    <td>${detail.quantity}</td>
                </tr>
                <tr>
                    <td><label>单价</label></td>
                    <td>${detail.unitPrice}</td>
                    <td><label>采购时间</label></td>
                    <td>
                            ${detail.purchaseDate}
                        <button type="button" onclick="addBaojia(${detail.oid})" class="btn btn-success btn-xs">添加报价</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div id="baojia${detail.oid}" class="baojia-container">
                            <!-- 动态添加报价表单 -->
                        </div>
                    </td>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="4" align="center">
                    <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                    <button type="button" id="subBaojia" class="btn btn-success">提交报价</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

<!-- 报价模板 -->
<div id="baojiademo" style="display: none;">
    <div class="baojia-item">
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label class="col-md-4 control-label">价格</label>
                <div class="col-md-8">
                    <input type="hidden" name="detailIds" value="">
                    <input type="text" name="prices" class="form-control" placeholder="请输入价格">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label class="col-md-4 control-label">联系人</label>
                <div class="col-md-8">
                    <input type="text" name="linkmans" class="form-control" placeholder="请输入联系人">
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label class="col-md-4 control-label">联系人电话</label>
                <div class="col-md-8">
                    <input type="text" name="linkPhones" class="form-control" placeholder="请输入电话">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label class="col-md-4 control-label">备注</label>
                <div class="col-md-8">
                    <input type="text" name="remarks" class="form-control" placeholder="请输入备注">
                </div>
            </div>
            <div class="form-group col-md-2">
                <button type="button" onclick="removeBaojia(this)" class="btn btn-danger">删除</button>
            </div>
        </div>
        <hr>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="alertMsgModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="alertmsg"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            console.log("服务器错误!");
        }
    });

    $(document).ready(function() {
        $("#myform").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function(validator,form, submitButton) {
                validator.defaultSubmit();
            }
        });

        $("#subBaojia").click(function() {
            $('#myform').data("bootstrapValidator").validate();
            if($('#myform').data("bootstrapValidator").isValid()){
                var size = $("input[name='detailIds']").length;
                if(size > 0){
                    $('#myform')[0].submit();
                }else{
                    $("#alertmsg").text("请添加报价再提交!");
                    $('#alertMsgModal').modal('show');
                }
            }
        });
    });

    function addBaojia(oid){
        var baojiaItem = $("#baojiademo .baojia-item").clone();
        baojiaItem.find("input[name='detailIds']").val(oid);
        $("#baojia" + oid).append(baojiaItem);

        // 初始化验证规则
        $('#myform').bootstrapValidator('addField', 'prices', {
            validators: {
                notEmpty: { message: '价格不能为空!' },
                regexp: {
                    regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                    message: '价格格式不正确,金额必须大于0!'
                }
            }
        });

        $('#myform').bootstrapValidator('addField', 'linkmans', {
            validators: { notEmpty: { message: '联系人不能为空!' } }
        });

        $('#myform').bootstrapValidator('addField', 'linkPhones', {
            validators: {
                notEmpty: { message: '联系人电话不能为空!' },
                regexp: {
                    regexp: /^(^(\d{3,4}-)?\d{7,8})$|^((1[0-9][0-9]\d{8}$))$/,
                    message: '电话格式不正确'
                }
            }
        });
    }

    function removeBaojia(btn){
        $(btn).closest('.baojia-item').remove();
    }
</script>
</body>
</html>